<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网格函数</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .fit-content-wrapper {
        width: 100%;
        height: 200px;
        display: grid;
        grid-template-columns: fit-content(400px) 400px fit-content(400px);
        grid-gap: 10px;
      }
      .fit-item,
      .minmax-item,
      .repeat-item {
        background-color: rgb(20, 106, 177);
      }

      .minmax-wrapper {
        margin-top: 100px;
        width: 100vw;
        display: grid;
        grid-gap: 10px;
        grid-template-columns:
          minmax(300px, 500px) minmax(50px, min-content)
          minmax(100px, max-content);
      }

      .repeat-wrapper {
        margin-top: 100px;
        width: 100vw;
        display: grid;
        /* grid-template-columns: repeat(3, 100px); */
        /* grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); */
        grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
        grid-gap: 10px;
      }
      .repeat-item{
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- <div class="fit-content-wrapper">
      <div class="fit-item item1">
        test1dsssss3333333 sssssssssssssss sssssssssssssssssss
        sssssssssssssssssss ssssssssssssssssssss 这是用了fit-content(400px)
      </div>
      <div class="fit-item item2">test2 这是固定宽度width:400px</div>
      <div class="fit-item item3">test3 这是fit-content(400px)</div>
    </div>

    <div class="minmax-wrapper">
      <div class="minmax-item">
        test1dsssss3333333 sssssssssssssss sssssssssssssssssss
        sssssssssssssssssss ssssssssssssssssssss
      </div>
      <div class="minmax-item">
        <p>test2222222222</p>
        <p>test 232232323233</p>
        <p>min-content采用最短的内容长度</p>
      </div>
      <div class="minmax-item">
        <p>test</p>
        <p>test 232232323233222222</p>
        <p>max-content采用最长的内容长度</p>
      </div>
    </div> -->

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 4444</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 444</div>
    </div>
  </body>
</html>
